
<template>
<layout>
  <el-card style="margin:48px;">
    <div slot="header">
      <span>我关注的</span>
    </div>
        <el-button type="primary" class="btn" v-for="(i,indx) in favs" @click="onfavs(indx)" :key="indx"> {{i}} &nbsp; <i class="el-icon-circle-cross"></i></el-button>
      
  </el-card>
  <el-card style="margin:48px;margin-top:20px;">
    <div slot="header">
      <span>未关注的</span>
    </div>
    <el-button class="btn" v-for="(i,indx) in unfavs" :key="indx" @click="nofavs(indx)">{{i}}</el-button>
      
  </el-card>
</layout>
</template>

<script>
import Layout from './Home.vue'

export default {
  components: {
    Layout
  },
  data () {
    return {
      favs:[
        "勇者是女孩","沙海","哑舍","第七女巫0","月影法则"
      ],
      unfavs:[
        "极度分裂","极道花嫁","盛骑之舞","薄荷之夏","天行九歌","万里长城"
      ]

    }
  },
  methods: {
    
    onfavs(indx){
      let zz=this.favs.splice(indx,1);
      this.unfavs.push(zz[0]);
    },
    nofavs(indx){
      let zz=this.unfavs.splice(indx,1);
      this.favs.unshift(zz[0]);
    }
  }
}

</script>

<style scoped>
.btn{
  margin:4px;
}

</style>
